<template>
    <div class="askPeople">
        <div v-for="(item,index) in askArr" :key="index" class="question" @click="linkto('/askPeople_detail?id='+item.id)">
            <div class="ask-qt">
                <div class="ask-icon">问</div>
                <div class="ask-word">{{item.content}}</div>
               
            </div>
            <div v-if="item.replyDTO" class="answer-qt">
                <div class="answer-icon">答</div>
                <span class="answer-word">{{item.replyDTO.content}}</span>
            </div>
            <div class="qt-detail">
                <div class="text1">全部{{item.replyCount}}个回答</div>
                <div class="text2">{{item.replyDTO?item.replyDTO.gmtCreated:item.gmtCreated}}</div>
            </div>
        </div>
        <div
            v-if="!askArr.length"
            class="no-data"
        >
            当前列表为空~
        </div>
        <div class="ask-bottom box flex-box-align">
            <input v-model="content" placeholder="向以买过的人提问" type="text">
            <div @click="submitBtn" class="btn">提问</div>
        </div>
    </div>
</template>
<script>
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";

export default {
    data(){
        return{
            productCode:'',
            content:'',
            askArr:[],
            state:false
        }
    },
    mounted(){
        let { productCode}= this.$router.currentRoute.query;
        this.productCode = productCode
        this.getAskList()
    },
    methods:{
        getAskList() {
            let param = {
                isDisable:'n',  
                pageIndex: 1,
                pageSize: 1000,
                parentId:'0',
                productCode:this.productCode
            };
            this.$vux.loading.show({
                text: "加载中"
            });
            let url = CONSTANT.LIST.ASKPAGE;
            common.post(url, param, res => {
                this.$vux.loading.hide();
                if (res.code == 200) {
                    this.askArr = res.data.bussData
                }
            });
        },
        submitBtn() {
            if(this.state) return
            this.$vux.loading.show({
                text: "提交中"
            });
            this.state = true
            let param = {
                content: this.content,
                productCode:this.productCode
            };
            let url = CONSTANT.LIST.ASKQUESTION;
            common.post(url, param, res => {
                this.$vux.loading.hide();
                this.state = false
                if (res.code == 200) {
                    this.$vux.toast.show({
                        text: "提问成功"
                    });
                    this.content = ''
                    this.getAskList()
                } else{
                    this.$vux.toast.show({
                        type: "cancel",
                        text: res.data.errMsg
                    });
                }
            });
        },
        linkto(link){
            this.$router.push(link)
        }
    }
    
}
</script>
<style lang="less">
.askPeople{
    position: relative;
    background-color: RGBA(250, 250, 250, 1);
    .question{
        box-sizing: border-box;
        padding: .37rem .3rem .34rem .3rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: .2rem;
        background-color: rgba(255, 255, 255, 1);
        &:last-child{
            margin-bottom: 1rem;
        }
        .ask-qt{
            display: flex;
            width: 100%;
            margin-bottom: .35rem;
            .ask-icon{
                display: inline-block;
                width:.3rem;
                height:.3rem;
                background:rgba(126, 86, 198, 1);
                border-radius:.04rem;
                font-size:.18rem;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:.3rem;
                text-align: center;
                margin-right: .21rem;
                transform: translateY(0.12rem);
            }    
            .ask-word{
                font-size:.3rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(51,51,51,1);
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
        .answer-qt{
            display: flex;
            width: 100%;
            margin-bottom: .45rem;
            vertical-align: top;   
            .answer-icon{
                box-sizing: border-box;
                width:.3rem;
                height:.3rem;
                background:rgba(251, 196, 63, 1);
                border-radius:.04rem;
                font-size:.18rem;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:.3rem;
                text-align: center;
                margin-right: .21rem;
                padding:  0 .03rem;
                transform: translateY(0.06rem);
            }
            .answer-word{
            display: block;
            box-sizing: border-box;
            font-size:.26rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(136,136,136,1);
            }

        }
        .qt-detail{
            width: 100%;
            display: flex;
            align-items: center;
            height:.23rem;
            font-size:.24rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(201,200,200,1);
            line-height:.38rem;
            justify-content:space-between;
        }


    }
    .no-data {
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        color: rgba(153, 153, 153, 1);
        margin-top: 40%;
    }
    .ask-bottom{
        position: fixed;
        bottom:0;
        left: 0;
        right: 0;
        width:100%;
        height:.98rem;
        background:rgba(255,255,255,1);
        border:1px solid rgba(218, 218, 218, 1);
        input{
            width:5.31rem;
            height:.66rem;
            background:rgba(246,246,246,1);
            opacity:0.8;
            border-radius:.33rem;
            padding-left: .33rem;
            margin-left: .24rem;
            margin-right: .18rem;
        }
        .btn{
            width:1.2rem;
            height:.66rem;
            background:rgba(126,86,198,1);
            border-radius:.33rem;
            font-size:.26rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:.66rem;
            text-align: center;
        }
    }
}

</style>
